<!DOCTYPE html>
<!-- direktiva ng-app automaticky spustí naši aplikaci -->
<html ng-app>
    <head>
        <meta charset="UTF-8" />
        <title>Úvod do AngularJS</title>
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
        <script type="text/javascript" src="js/controllers.js"></script>
    </head>

    <!-- ng-controller - předá danému elementu scope kontroleru -->
    <body ng-controller="TableController">
        <section>
            <header>
                <h1>Seznam dat</h1>
                <!-- ng-model - direktiva rika angularu aby pouzil 'two-way' data binding. Veskere zmeny v elementu se projevi ve scope a naopak
                 funguje jen s elementy input, select a textarea -->
                <input type="text" placeholder="hledaný výraz" id="search" ng-model="searchQuery" />
            </header>

            <table>
                <thead>
                    <tr>
                        <!-- definice orderProp podle ktere hodnoty se ma radit a definice reverse  -->
                        <th ng-click="orderProp = 'id'; reverse = !reverse">ID</th>
                        <th ng-click="orderProp = 'firstName'; reverse = !reverse">Jméno</th>
                        <th ng-click="orderProp = 'lastName'; reverse = !reverse">Příjmení</th>
                        <th ng-click="orderProp = 'sex'; reverse = !reverse">Pohlaví</th>
                    </tr>
                </thead>
                <tbody>
                <!-- repeater pres pole persons, to naplni ve scope TableController-->
                <!-- filtry(píší se za PIPE) bere data z proměnné searchQuery naplněné v input textu-->
                <!-- orderBy - razeni podle property s nazvem orderProp, reverse - logicka hodnota zda se ma radit ASC nebo DSC -->
                    <tr ng-repeat="person in persons | filter:searchQuery | orderBy:orderProp:reverse" >
                        <td>{{person.id}}</td>
                        <td>{{person.firstName}}</td>
                        <td>{{person.lastName}}</td>
                        <td>{{person.sex}}</td>
                    </tr>
                </tbody>
            </table>

            <!--Formulat pro pridaveni zaznamu do tabulky -->
            <!-- Direktiva ng-submit - zpracovava udalost onSubmit, v nasem pripade je volana fce addData -->
            <form ng-submit="addData()">
                <input type="text" ng-model="person.firstName" placeholder="jméno" />
                <input type="text" ng-model="person.lastName" placeholder="příjmení" />
                <select ng-model="person.sex">
                    <option value="" disabled="disabled">pohlaví...</option>
                    <option value="male">Muž</option>
                    <option value="female">Žena</option>
                </select>
                <input type="submit" value="P&#248;idat"/>
            </form>
        </section>
    </body>
</html>